<template>
  <!-- 分页页码组件 -->

  <div class="data-pagination">
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 25, 50, 100]"
      :page-size="25"
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formData.total"
      prev-text="上一页"
      next-text="下一页"
      :hide-on-single-page="true"
      :background="true"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'DataPagination',
  props: {
    // 页面数据
    formData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  methods: {
    // 改变 每页显示数据数量 触发的事件
    handleSizeChange(size) {
      // console.log(`每页 ${size} 条`)
      // 向父组件 传值
      this.$emit('setSize', size)
    },
    // 点击分页按钮 触发的事件
    handleCurrentChange(page) {
      // console.log(`当前页: ${page}`)
      // 向父组件传值
      this.$emit('setPage', page)
    }
  }
}
</script>

<style lang='scss' scoped>
.data-pagination {
  text-align: end;
  padding: 25px 0;
}
</style>
